<template>
    <view class="image-list-wrap" :class="[isPhone ? 'iphoneStyePadding' : '']">
        <view class="imginfo" v-for="(item, index) in photoList" :key="index">
            <view class="imgmsg" @click="gotoPreview(index)"><LazyImage class="lazy-image" :imageStyle="imageStyle" :mode="mode" :src="item.image_url_t"></LazyImage></view>
            <view class="checkmsg" @click="selectPhoto(item)">
                <view class="checkmark"><view class="checkImg" :class="[item.isSelected ? 'isSelectedClass' : '']"></view></view>
                <span class="checktxt">我要这张</span>
                <span class="redtip">{{ item.date }}天到期</span>
            </view>
        </view>
    </view>
</template>
<script>
import { accAdd, floatMul } from '@/common/utils.js';
import LazyImage from '@/components/LazyImage/index.vue';
export default {
    name: '',
    data() {
        return {
            phoneTypeArr: ['iPhone X', 'iPhone XS', 'iPhone 11 Pro', 'iPhone XS Max', 'iPhone 11 Pro Max', 'iPhone XR', 'iPhone 11'],
            isPhone: false,
            // 是否全选
            isSelectdAll: false,
            mode: 'aspectFill',
            imageStyle: {
                width: '100%',
                height: '100%',
                borderRadius: '10rpx 10rpx'
            },
            photoList: []
        };
    },
    props: {
        originList: {
            type: Array,
            required: true
        },
        packPrice: {
            type: Number,
            default: 0
        }
    },
    computed: {

    },
    mounted() {
        this.resize();
    },
    created() {
        uni.$on('updateSelectdAllStatus', data => {
            this.updateSelectdAllStatus(data.status);
        });
        uni.$on('calculatePicCount', data => {
            this.calculatePicCount();
        });
    },
    methods: {
        updateSelectdAllStatus(status) {
            this.photoList.forEach(item => {
                item.isSelected = status;
            });
            this.$u.vuex('vuex_toBePaidList', this.photoList);
            this.isSelectdAll = status;
            this.checkIsSelectedAll();
            this.calculatePicCount();
        },
        // 预览照片
        gotoPreview(index) {
            this.$emit('gotoPreView', {
                index: index,
                list: this.photoList
            });
        },
        // 单击选中或取消选中
        selectPhoto(item) {
            item.isSelected = !item.isSelected;
            this.checkIsSelectedAll();
            this.calculatePicCount();
        },
        // 判断是否已经全部选中
        checkIsSelectedAll() {
            this.isSelectdAll = this.photoList.every(item => {
                return item.isSelected === true;
            });
        },
        // 计算选中照片数量
        calculatePicCount() {
            let hadSelectPicCount = 0;
            // 所有照片总金额（未计算打包价价和优惠券）
            let allSaleAmount = 0;
            // 打包之后价格
            let packagedPrice = 0;
            let photosIdArr = [];
            // 打包类型
            let type = 3;
            this.photoList.forEach((item, index) => {
                if (item.isSelected) {
                    hadSelectPicCount += 1;
                    allSaleAmount = accAdd(allSaleAmount, item.price);
                    photosIdArr.push(item.photoid);
                }
            });
            // 如果所有照片总金额比打包金额大的话  那么打包之后价格就按照打包价计算
            if (allSaleAmount > this.packPrice && this.packPrice > 0) {
                packagedPrice = this.packPrice;
                type = 2;
            } else {
                packagedPrice = allSaleAmount;
            }
            this.$emit('getPhotosData', {
                isSelectdAll: this.isSelectdAll,
                saleAmount: allSaleAmount,
                packagedPrice: packagedPrice,
                hadSelectPicCount: hadSelectPicCount,
                ids: JSON.stringify(photosIdArr),
                type: type
            });
        },
        async resize() {
            const getSystemInfo = await this.$uniPromise.getSystemInfo();
            if (this.phoneTypeArr.includes(getSystemInfo.model) || getSystemInfo.screenHeight > 800) {
                this.isPhone = true;
            }
        }
    },
    components: { LazyImage },
    watch: {
        originList: {
            handler(newVal, oldVal) {
                if (newVal.length > 0) {
                    newVal.forEach(item => {
                        if(item.isSelected===undefined){
                            item.isSelected = false;
                        }
                    });
                    this.photoList = newVal;
                }
            },
            deep: true,
            immediate: true
        }
    }
};
</script>
<style lang="scss" scoped="scoped">
.image-list-wrap {
    font-size: 0;
    margin-top: 78rpx;
    padding-bottom: 130rpx;
    .imginfo {
        width: 330rpx;
        height: 296rpx;
        background: #ffffff;
        border-radius: 10rpx;
        margin: 31rpx 0 0 30rpx;
        display: inline-block;
        .imgmsg {
            height: 224rpx;
            background: #c3c3c3;
            border-top-left-radius: 10rpx;
            border-top-right-radius: 10rpx;
            .img {
                width: 100%;
                height: 100%;
                border-radius: 10rpx 10rpx;
            }
        }
        .checkmsg {
            height: 72rpx;
            line-height: 80rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            .checkmark,
            .checktxt {
                display: inline-block;
            }
            .checkmark {
                width: 34rpx;
                height: 100%;
                margin: 0 11rpx 0 20rpx;
                .checkImg {
                    margin-top: 20rpx;
                    width: 34rpx;
                    height: 34rpx;
                    background: url(@/pages/minePages/static/pay/null.png) no-repeat;
                    background-size: cover;
                }
                .isSelectedClass {
                    width: 34rpx;
                    height: 34rpx;
                    background: url(@/pages/minePages/static/pay/ok.png) no-repeat;
                    background-size: cover;
                }
            }
            .checktxt,
            .redtip {
                height: 100%;
                text-align: center;
                line-height: 72rpx;
                font-size: 26rpx;
                vertical-align: top;
            }
            .redtip {
                margin-left: 49rpx;
                color: #ff4d4d;
            }
        }
    }
}
.iphoneStyePadding {
    padding-bottom: 160rpx;
}
</style>
